import React from "react"
import * as Yup from "yup"
import { useState } from "react"
import { Link as RouterLink, useNavigate } from "react-router-dom"
import { useFormik, Form, FormikProvider } from "formik"
import { useTranslation } from "react-i18next"
// material
import { Link, Stack, Checkbox, TextField, IconButton, InputAdornment, FormControlLabel } from "@mui/material"
import { LoadingButton } from "@mui/lab"
// component
import Iconify from "../../../components/Iconify"

export default function LoginForm() {
  const { t } = useTranslation()
  const navigate = useNavigate()

  const [showPassword, setShowPassword] = useState(false)

  const LoginSchema = Yup.object().shape({
    email: Yup.string().email(t("login.loginForm.emailInvalid")).required(t("login.loginForm.emailRequired")),
    password: Yup.string().required(t("login.loginForm.passwordRequired")),
  })

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      remember: true,
    },
    validationSchema: LoginSchema,
    onSubmit: () => {
      console.log("onSubmit")
      navigate("/dashboard", { replace: true })
    },
  })

  const { errors, touched, values, isSubmitting, handleSubmit, getFieldProps } = formik

  const handleShowPassword = () => {
    setShowPassword((show) => !show)
  }

  return (
    <FormikProvider value={formik}>
      <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
        <Stack spacing={3}>
          <TextField
            fullWidth
            autoComplete="username"
            type="email"
            label={t("common.emailAddress")}
            {...getFieldProps("email")}
            error={Boolean(touched.email && errors.email)}
            helperText={touched.email && errors.email}
          />

          <TextField
            fullWidth
            autoComplete="current-password"
            type={showPassword ? "text" : "password"}
            label={t("common.password")}
            {...getFieldProps("password")}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={handleShowPassword} edge="end">
                    <Iconify icon={showPassword ? "eva:eye-fill" : "eva:eye-off-fill"} />
                  </IconButton>
                </InputAdornment>
              ),
            }}
            error={Boolean(touched.password && errors.password)}
            helperText={touched.password && errors.password}
          />
        </Stack>

        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
          <FormControlLabel control={<Checkbox {...getFieldProps("remember")} checked={values.remember} />} label={t("login.loginForm.rememberMe")} />

          <Link component={RouterLink} variant="subtitle2" to="#" underline="hover">
            {t("login.loginForm.forgetPassword")}
          </Link>
        </Stack>

        <LoadingButton fullWidth size="large" type="submit" variant="contained" loading={isSubmitting}>
          {t("login.loginForm.login")}
        </LoadingButton>
      </Form>
    </FormikProvider>
  )
}
